<html>
<head>
<title>Pop-up Link with Description</title>
<style type="text/css">
	.transparent {
		filter:alpha(opacity=90);
		background-color:green;
		display:none;
		width:170;
		height:100;
		position:absolute;
		color: white;
		border: 1 green solid;
	}
</style>
<script>
	// this function shows the pop-up when user moves the mouse over the link
	function Show()
	{
		x = event.clientX + document.body.scrollLeft; // get the mouse left position
		y = event.clientY + document.body.scrollTop + 35; // get the mouse top position 
		Popup.style.display="block"; // display the pop-up
		Popup.style.left = x; // set the pop-up's left
		Popup.style.top = y; // set the pop-up's top
	}
	// this function hides the pop-up when user moves the mouse out of the link
	function Hide()
	{
		Popup.style.display="none"; // hide the pop-up
	}
</script>
</head>

<body bgcolor="#000000" text="#FFFFFF">
<a href="" onMouseOut="Hide()" onMouseOver="Show()"  onMouseMove="Show()">Move the mouse over here</a><br>
<br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link. 
<div id="Popup" class="transparent">
	<div style="background-color: #003366"><b>Title goes here</b></div>
	<div></b>Description goes here</div>
</div>
</body>
</html>
